<template>
  <el-table :data="renderList" style="width: 100%">
    <el-table-column label="索引" type="index" width="80"> </el-table-column>
    <el-table-column prop="adminname" label="管理员名称"> </el-table-column>
    <el-table-column prop="adminid" label="管理员id"> </el-table-column>
    <el-table-column prop="role" label="角色">
      <template #default="{ row }">
        <el-tag :type="row.role === 1 ? '' : 'danger'">{{
          row.role === 1 ? "普通管理员" : "超级管理员"
        }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableData.length"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { adminListRequest } from "@/api/userApi";
export default {
  name: "AdminList",
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页
      pageSize: 10, // 一页显示多少条
    };
  },
  created() {
    adminListRequest();
  },
  computed: {
    // 前端分页
    renderList() {
      // 1   0-9  2: 10-19  3:20-29
      const start = (this.currentPage - 1) * this.pageSize;
      return this.tableData.slice(start, this.currentPage * this.pageSize);
    },
  },
  methods: {
    // 获取列表
    async getAdminList() {
      try {
        const res = await adminListRequest();
        console.log(res);
        this.tableData = res.data.data;
        console.log(this.tableData.length);
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  margin: 30px;
  justify-content: center; //居中
}
</style>
